<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>评分表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/jeui.css"  media="all">
    <link rel="stylesheet" href="../css/skin/jebox.css"  media="all">
    <link rel="stylesheet" href="../css/skin/jedate.css"  media="all">
    <script type="text/javascript" src="../js/modules/jeui.js"></script>
    <script src="https://cdn.wilddog.com/sdk/js/2.5.17/wilddog.js"></script>
    <script src="../js/dataserver.js"></script>
</head>
<body>
<div class="je-p20">
    <div id="tablebox" class="je-f14">
       <!--  <table class="je-table" even>
            <thead>
            <tr>
                <th>ID</th>
                <th>时间</th>
                <th>评分</th>
                <th>级别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tablebody">
            <tr>
                <td colspan="5"  align="center">暂无数据</td>
            </tr>
            </tbody>
        </table> -->
    </div>
</div>
<script type="text/javascript">
    function initTable() {
        data_getAllFrom("mydata/total",function (data) {
            var localdata = data_to_arry(data,15);
            $("#tablebox").jeTable({
                height:"650",
                isPage:true,
                pageType:"local",
                datas:localdata.data,
                columnSort:[2,3,4],
                columns:[
                    {name:'ID', field:'id',width:"500", align: 'center'},
                    { name:'时间', field:'time' ,width:"200", align:'center'},
                    { name:'评分', field:'grade' ,width:"100", align:'left' },
                    { name:'级别', field:'rank' ,width:"150", align:'center'},
                    { name:'操作', field:'id' ,width:"300", align:'center',renderer: function(obj,rowidx){
                        return '<button class="je-btn edit-btn je-btn-small je-f12">编辑</button> <button class="je-btn dele-btn je-btn-small je-bg-red je-f12">删除</button>';
                    }}
                ],
                pageField:{
                    pageIndex:{field:"size",num:1},
                    pageSize:{field:"pagesize",num:15},
                    ellipsis:true,
                    dataCount:localdata.totalCount,
                    pageCount:localdata.totalPage
                }
            })
        });
    }

    function initTable1() {
        data_getAllFrom("mydata/total",function (data) {
            console.log(data);
            var html = [];
            for( key in data){
                if(key != "details"){
                    var obj = data[key];
                    html.push('<tr>');
                    html.push('<td>'+key+'</td>');
                    html.push('<td>'+obj.time+'</td>');
                    html.push('<td>'+obj.grade+'</td>');
                    html.push('<td>'+obj.rank+'</td>');
                    html.push('<td align="center"><button class="je-btn edit-btn je-btn-small je-f12">编辑</button> <button class="je-btn dele-btn je-btn-small je-bg-red je-f12">删除</button></td>');
                    html.push('</tr>');
                }

            }
            $("#tablebody").html(html.join(""));
        });
    }

    function autoData(dom) {
        var o = {};
        dom.find("[datakey]").each(function () {
            o[$(this).attr("datakey")] = $(this).val();
        });
        return o;
    }

    function getFrom(doms) {
        var html = [];
            html.push('<div class="je-form-pane dayfrom">');
                html.push('<div class="je-form-item">');
                html.push('<label class="je-label je-f14">时间</label>');
                html.push('<div class="je-inputbox"><input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="je-input" datakey="time" value="'+doms.eq(1).children().text()+'"></div>');
                html.push('</div>');
                html.push('<div class="je-form-item">');
                html.push('<label class="je-label je-f14">评分</label>');
                html.push('<div class="je-inputbox"><input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="je-input" datakey="grade" value="'+doms.eq(2).children().text()+'"></div>');
                html.push('</div>');
                html.push('<div class="je-form-item">');
                html.push('<label class="je-label je-f14">级别</label>');
                html.push('<div class="je-inputbox"><input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="je-input" datakey="rank" value="'+doms.eq(3).children().text()+'"></div>');
                html.push('</div>');
            html.push('</div>');
        return html.join("");
    }

    jeui.use(["jquery","jeTable","jeBox","utils"],function () {
        
        initTable();
        $("#tablebox").on("click",".edit-btn",function () {
            var tbs = $(this).parent().parent().siblings();
            jeBox.open({
                title: "修改数据",
                boxSize:["400px","240px"],
                content:getFrom(tbs),
                maskLock : true,
                button: [ {
                    name: '修改',
                    callback: function(index, id){
                        console.log(autoData($(".dayfrom")));
                        data_updata({
                            url : "mydata/total/"+tbs.eq(0).children().text(),
                            data : autoData($(".dayfrom")),
                            success : function () {
                                jeBox.close(index);
                                initTable();
                            },
                            fail : function () {
                                jeBox.alert("修改失败");
                            }
                        });
                    }
                }]
            });
        });

        $("#tablebox").on("click",".dele-btn",function () {
            var tbs = $(this).parent().parent().siblings();
            data_delete({
                url : "mydata/total/"+tbs.eq(0).children().text(),
                success : function () {
                    jeBox.alert("删除成功");
                    initTable();
                },
                fail : function () {
                    jeBox.alert("删除失败");
                }
            });
        })
    });
</script>
</body>
</html>